<template>
    <div id="exceedLine" ref="exceedLine"></div>
</template>

<script>
// https://www.makeapie.com/editor.html?c=xXbP45bsC
import echarts from 'echarts'
import { overweightTrends } from '@/api/api' // 引入api请求
export default {
    props: ['isReady'],
    name: "",
    data () {
        return {
            echartElement: null,
            chartData:{
                dateList:[],
                valList:[]
            }
        }
    },
    methods: {
        getChart () {
            // 基于准备好的dom，初始化echarts实例
            this.echartElement = echarts.init(this.$el)
            let option = {
                backgroundColor: '',
                title: {
                    text: '超标数',
                    show: true,
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 15,
                    },
                    backgroundColor: 'rgb(43, 106, 205)',
                    top: '15%',
                    left: '3%',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        },
                    },
                },
                grid: {
                    top: '30%',
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: true
                    },
                    splitArea: {
                        // show: true,
                        color: '#f00',
                        lineStyle: {
                            color: '#f00'
                        },
                    },
                    axisLabel: {
                        color: '#fff'
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false,
                    // data: ['01.21', '01.22', '01.23', '01.24', '01.25', '01.26'],
                    data:this.chartData.dateList
                }],

                yAxis: [{
                    type: 'value',
                    min: 0,
                    // max: 140,
                    splitNumber: 4,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)'
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                        margin: 20,
                        textStyle: {
                            color: '#d1e6eb',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [
                    {
                        name: '超标数',
                        type: 'line',
                        // smooth: true, //是否平滑
                        showAllSymbol: true,
                        // symbol: 'image://./static/images/guang-circle.png',
                        symbol: 'circle',
                        symbolSize: 10,
                        lineStyle: {
                            normal: {
                                // color: "rgba(195, 73, 75, 1)",
                                color: "#00ca95",
                                // shadowColor: 'rgba(0, 0, 0, .3)',
                                // shadowBlur: 0,
                                // shadowOffsetY: 5,
                                // shadowOffsetX: 5,
                            },
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                            }
                        },
                        itemStyle: {
                            // color: 'rgba(195, 73, 75, 1)',
                            color: "#00ca95",
                            // borderColor: "#fff",
                            // borderWidth: 3,
                            // shadowColor: 'rgba(0, 0, 0, .3)',
                            // shadowBlur: 0,
                            // shadowOffsetY: 2,
                            // shadowOffsetX: 2,
                        },
                        tooltip: {
                            show: false
                        },
                        areaStyle: {
                            normal: {
                                // 195, 73, 75
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(195, 73, 75, 0.8)'
                                // },
                                // {
                                //     offset: 1,
                                //     color: 'rgba(195, 73, 75, 0)'
                                // }
                                // ], false),
                                // shadowColor: 'rgba(195, 73, 75, 0.9)',
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,202,149,0.7)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,202,149,0)'
                                }
                                ], false),
                                shadowColor: 'rgba(0,202,149, 0.9)',
                                shadowBlur: 20
                            }
                        },
                        // data: [28, 39, 21, 17, 28, 35],
                        data: this.chartData.valList
                    },
                ]
            };
            this.echartElement.setOption(option);
        },
        overweightTrends () {
            overweightTrends()
                .then(res => {
                    if(res.status==200&&res.data.code==2000){
                        res.data.data.forEach(v=>{
                            this.chartData.dateList.push(this.$dateFormat('mm.dd',v['_id']*1000));
                            this.chartData.valList.push(v['count'])
                        })
                    }
                    this.getChart();
                })
                .catch(err => {
                    console.log(err);
                })
        }
    },
    mounted () {
    },
    watch: {
        isReady (nv, ov) { // 监听地图点是否加载成功
            this.overweightTrends()
        }
    },
    beforeDestroy () {
        this.echartElement.dispose();
    }
}
</script>

<style lang="less" scoped>
#exceedLine {
    width: 100%;
    height: 100%;
}
</style>